<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.0/ui/misc/PointSimplifier/examples/star.html -->
    <!--<base href="//webapi.amap.com/ui/1.0/ui/misc/PointSimplifier/examples/" />-->
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>一级</title>
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
            margin: 0px;
        }

        #loadingTip {
            position: absolute;
            z-index: 9999;
            top: 0;
            right: 0;
            padding: 3px 10px;
            background: red;
            color: #fff;
            font-size: 13px;
        }

        .site-spread {
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>
</head>

<body class="gray-bg">
<div id="container"></div>
<div class="row site-spread">
    <div class="form-group row">

        <div class="col-sm-4">
            <select class="form-control m-b" name="account">
                <option>江汉区</option>
                <option>武昌区</option>
                <option>洪山区</option>
                <option>江岸区</option>
            </select>
        </div>
        <div class="col-sm-4">
            <select class="form-control m-b" name="account">
                <option>辖区1</option>
                <option>辖区2</option>
                <option>辖区3</option>
                <option>辖区4</option>
            </select>
        </div>
        <div class="col-sm-4">
            <a href="map3.html" class="btn btn-w-m btn-info">确认</a>
        </div>
    </div>

    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>商家分布</h5>
            </div>
            <div class="ibox-content">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>区域</th>
                        <th>注册商户数</th>
                        <th>使用电信宽带</th>
                        <th>电信宽带占比</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>江汉路</td>
                        <td>536</td>
                        <td>130</td>
                        <td>24%</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.6&key=28b796036f4d1498d5e30f4d1e2af063'></script>
<!-- UI组件库 1.0 -->
<script src="js/gaodeui.js"></script>
<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>


<!-- 自定义js -->
<script src="js/content.js?v=1.0.0"></script>
<script type="text/javascript">
    $(function () {
        //创建地图
        var map = new AMap.Map('container', {
            center: [114.290123, 30.582365],
            resizeEnable: true,
            zoom: 16
        });

        //just some colors
        var colors = [
            '#0cc2f2',
            '#4fd2b1',
            '#90e36f',
            '#ffe700',
            '#ff9e00',
            '#ff6700',
            '#ff1800'
        ];

        AMapUI.load(['ui/misc/PointSimplifier', 'lib/$'], function (PointSimplifier, $) {

            if (!PointSimplifier.supportCanvas) {
                alert('当前环境不支持 Canvas！');
                return;
            }

            var pointSimplifierIns = new PointSimplifier({
                zIndex: 115,
                autoSetFitView: false,
                map: map, //所属的地图实例

                getPosition: function (item) {
                    if (!item) {
                        return null;
                    }

                    var parts = item.split(',');

                    return [parseFloat(parts[0]), parseFloat(parts[1])];
                },
                getHoverTitle: function (dataItem, idx) {
                    return '序号: ' + idx;
                },
                //使用GroupStyleRender
                renderConstructor: PointSimplifier.Render.Canvas.GroupStyleRender,
                renderOptions: {
                    eventSupport: false, //禁止事件,对性能更友好
                    //点的样式
                    pointStyle: {
                        fillStyle: 'rgb(255,0,0)',
                        width: 5,
                        height: 5
                    },
                    topNAreaStyle: null,
                    getGroupId: function (item, idx) {

                        //随机返回一个组ID
                        return Math.ceil(colors.length * Math.random());
                    },
                    groupStyleOptions: function (gid) {

                        //随机设置大小
                        var radius = 2 + 10 * Math.random();

                        return {

                            pointStyle: radius > 0 ? {
                                    content: function (ctx, x, y, width, height) {

                                        var p = {
                                            x: x + width / 2,
                                            y: y + height / 2,
                                            radius: radius
                                        };

                                        ctx.beginPath();
                                        var gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.radius);
                                        gradient.addColorStop(0, "rgba(255,0,0,0.8)");
                                        gradient.addColorStop(1, "rgba(255,0,0,0.1)");
                                        ctx.fillStyle = gradient;
                                        ctx.arc(p.x, p.y, p.radius, Math.PI * 2, false);
                                        ctx.fill();

                                    },

                                    //fillStyle: colors[gid % colors.length],
                                    width: radius * 2,
                                    height: radius * 2
                                } : null,
                            pointHardcoreStyle: {
                                width: radius * 2 + 3,
                                height: radius * 2 + 3
                            }
                        };
                    }

                }
            });


            //重复render
            setInterval(function () {
                pointSimplifierIns.render();
            }, 500)


            $('<div id="loadingTip">加载数据，请稍候...</div>').appendTo(document.body);
            $.get('data/massPoint.json', function (data) {
                pointSimplifierIns.setData(data.slice(0, 100));
                $('#loadingTip').remove();
            })
        });
    })
</script>
</body>

</html>